<!DOCTYPE html>
<html>
<head>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<title>函数式组件</title>
</head>
<body>
<div id="app">
	<my-component blog-title="测试标题1"></my-component>
	<my-component-a blog-title="测试标题 context"></my-component-a>
	<my-component-a :blog-title=testBlogTitle></my-component-a>
</div>
<div id="root">
    <smart :items=items></smart>
</div>
	
</body>
</html>
<script type="text/javascript">
Vue.component('my-component', {
  // functional: true,
  // Props 是可选的
  props: {
    blogTitle: String,
  },

  render: function (createElement) {
    return createElement('h1',this.blogTitle)
    
  } 
});
Vue.component('my-component-a', {
  functional: true,
  // Props 是可选的
  props: {
    blogTitle: String,
  },
  // 为了弥补缺少的实例
  // 提供第二个参数作为上下文
  render: function (createElement, context) {
  	console.log("----------------"+context.props.blogTitle);
    return createElement('h1',context.props.blogTitle)
  }

});
new Vue({
		el:'#app',
		data:{
			testBlogTitle:"Blog 标题 Context"
		}
  })

// ----------------------------------------------
	let EmptyList='p';
    let TableList='ul';
    let OrderedList='ul';
    let UnorderedList='ol';

    Vue.component('smart', {
        functional: true,
        props: {
            items: {
                type: Array,
                required: true
            },
            isOrdered: Boolean
        },
        render: function (createElement, context) {
            function appropriateListComponent () {
                let items = context.props.items;

                if (items.length === 0)           return EmptyList;
                if (typeof items[0] === 'object') return TableList;
                if (context.props.isOrdered)      return OrderedList;

                return UnorderedList;
            }

            return createElement(
                appropriateListComponent(),
                Array.apply(null, { length: context.props.items.length }).map(function (value,index) {
                    return createElement('li',context.props.items[index].name)
                })
            )
        }
    })
    var vm=new Vue({
        el:'#root',
        data:{
            items:[
                {
                    name:'张三'
                },
                {
                    name:'李四'
                }
            ]
        }
    })

</script>